<template>
  <section>
    <el-row class="title-add">
      <el-col :span="16">
        <el-button type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>
      </el-col>
      <!--搜索条件-->
      <el-col :span="4">
        <el-input v-model="userName" placeholder="请输入用户名称" clearable></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询
        </el-button>
        <el-button type="success" size="small" icon="el-icon-circle-close" style="margin-left: 15px" @click="cleanUp">
          清除
        </el-button>
      </el-col>
    </el-row>
    <el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
      <el-table-column prop="name" label="用户名" width="150" align="center"></el-table-column>
      <el-table-column prop="account" label="账号" width="150" align="center"></el-table-column>
      <el-table-column prop="className" label="班级" width="200" align="center"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="160" align="center"></el-table-column>
      <el-table-column prop="jurisdiction" label="角色" align="center">
        <template slot-scope="scope">
          <span>{{ selectJu(scope.row.jurisdiction) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          <el-button type="danger" size="small" @click="resetPwd(scope.row.id)">密码重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--新增/编辑模态框-->
    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
               :before-close="handleDialogClose">
      <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
               class="form">
        <el-row>
          <el-col :span="10">
            <el-form-item prop="name" label="用户名称：" :label-width="formLabelWidth">
              <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名称" style="width:100%" type="text"
                        autosize></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="jurisdiction" label="角色：" :label-width="formLabelWidth">
              <el-select v-model="addAndEditFormData.jurisdiction" placeholder="请选择角色" style="width:100%">
                <el-option
                  v-for="item in jurisdictions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="account" label="账号：" :label-width="formLabelWidth" >
          <el-input v-model="addAndEditFormData.account" placeholder="请输入账号" style="width:90%" type="text" :disabled="isEditable" autosize></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话：" :label-width="formLabelWidth">
          <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="text" autosize></el-input>
        </el-form-item>
        <el-form-item prop="classId" label="班级：" :label-width="formLabelWidth">
          <el-cascader @change="stuClassChange" :change-on-select="true" :props="defaultParams"
                       :options="classNames" v-model="addAndEditFormData.classId" :clearable="true" style="width:90%" clearable autosize>
          </el-cascader>
        </el-form-item>
        <el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth">
          <el-input v-model="addAndEditFormData.idCard" placeholder="请输入身份证号" style="width:90%" type="text"
                    autosize></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirmEvent('addAndEditElForm')">确 定</el-button>
        <el-button @click="handleDialogClose">返 回</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  export default {
    name: "user",
    data() {
      return {
        total: 1,      // 总数
        page: 1,       // 当前页
        limit: 10,     // 分页大小
        userName: '',
        tableData: [],
        defaultParams: {
          label: 'name',
          value: 'id',
          children: 'child'
        },
        classNames: [], // 班级数据
        // 新增
        title: '',
        closeOnClickModal: false,
        addAndEditDialogFormVisible: false,
        isEditable: true,                   // 标志是否是编辑
        showAddAndEditForm: false,
        showForm: false,
        formLabelWidth: '150px',
        addAndEditFormData: {
          id: '',
          name: '',
          account: '', // 账号不可编辑
          classId: '',
          phone: '',
          idCard: '',
          jurisdiction: ''
        },
        addAndEditRules: {
          name: {
            required: true, message: '用户名称不能为空', trigger: 'blur'
          },
          account: {
            required: true, message: '账号不能为空', trigger: 'blur'
          },
          phone: {
            required: true, message: '电话不能为空', trigger: 'blur'
          },
          jurisdiction: {
            required: true, message: '角色不能为空', trigger: 'blur'
          },
        },

        // 角色数据
        jurisdictions: [{
          value: 'STUDENT',
          label: '普通学生'
        }, {
          value: 'INSTRUCTOR',
          label: '辅导员'
        }, {
          value: 'HOUSEMASTER',
          label: '宿管'
        }, {
          value: 'LEADER',
          label: '领导'
        }]
      }
    },

    created() {
      this.getList();
    },

    methods: {
      // 查找角色
      selectJu(va) {
        for (let i = 0; i < 4; i++) {
          let jurisdiction = this.jurisdictions[i];
          if (jurisdiction.value === va) {
            return jurisdiction.label;
          }
        }

      },

      // 查找班级信息
      getClass() {
        this.api.getApi("/stu/class/get/treeData").then(e => {
          this.classNames = e.data;
        })
      },

      // 新增
      addUser() {
        this.getClass();
        this.title = "新增";
        this.isEditable = false;
        this.showAddAndEditForm = true;
        this.addAndEditDialogFormVisible = true;
      },

      // 编辑
      editData(index, row) {
        this.getClass();
        this.title = "编辑";
        this.isEditable = true;
        this.$set(this.addAndEditFormData, 'id', row.id);
        this.$set(this.addAndEditFormData, 'name', row.name);
        this.$set(this.addAndEditFormData, 'account', row.account);
        this.$set(this.addAndEditFormData, 'classId', row.classId);
        this.$set(this.addAndEditFormData, 'phone', row.phone);
        this.$set(this.addAndEditFormData, 'idCard', row.idCard);
        this.$set(this.addAndEditFormData, 'jurisdiction', row.jurisdiction);
        this.showAddAndEditForm = true;
        this.addAndEditDialogFormVisible = true;
      },

      // 保存/修改
      handleConfirmEvent(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            let formData = this.addAndEditFormData;
            if (this.isEditable) {
              this.api.putApi("/manager/stu/update", formData).then(res => {
                if (res.data.code === 200) {
                  this.getList();
                  this.handleDialogClose();
                }
              })
            } else {
              this.api.postApi("/manager/stu/save", formData).then(res => {
                if (res.data.code === 200) {
                  this.getList();
                  this.handleDialogClose();
                }
              })
            }
          }
        })
      },

      // 删除
      deleteData(id) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.api.deleteApi("//manager/stu/delete?id=" + id).then(res => {
            if (res.data.code === 200) {
              this.getList();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 清除
      cleanUp() {
        this.userName = '';
        this.getList();
      },

      // 分页查询
      getList() {
        this.api.getApi("/manager/stu/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.userName).then(res => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.page = res.data.pageNum;
          this.limit = res.data.pageSize;
        });
      },

      // 分页大小
      handleSizeChange(val) {
        this.limit = val;
        this.getList();
      },

      // 第几页
      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },

      // 关闭模态框
      handleDialogClose() {
        this.showAddAndEditForm = false;
        this.addAndEditFormData = {};
        this.addAndEditDialogFormVisible = false;
      },

      // 密码重置
      resetPwd(value) {
        if (value == null || value === '') {
          return;
        }
        this.api.getApi("/manager/stu/resetPassword?id=" + value);
      },

      // 监听班级选择
      stuClassChange(value) {
        this.addAndEditFormData.classId = value[value.length - 1];
      },

      // 监听角色选择
      jurisdictionChange(value) {
        this.addAndEditFormData.jurisdiction = value[value.length - 1];
      },
    }
  }
</script>

<style scoped>
  .title-add {
    margin: 10px 10px 10px 0;
  }

  .title-add button {
    padding: 12px 7px;
  }

  .bottom-page {
    margin-top: 25px;
  }

</style>
